<template>
  <div>
    <van-nav-bar
      title="城市列表"
      fixed
      z-index='99'
      left-arrow
      @click-left="$router.back()"
    />
    <van-index-bar
      :sticky-offset-top=45
      highlight-color="#21b97a"
      :index-list="indexList"
    >
      <van-index-anchor index="#">当前城市</van-index-anchor>
      <van-cell :title="city.label" />
      <van-index-anchor index="热">热门城市</van-index-anchor>
      <van-cell
        v-for="item in hotCity"
        :key="item.value"
        :title="item.label"
        @click="changeCity($event, item)"
      />
      <div
        v-for="(item, index) in filterList"
        :key="index"
      >
        <van-index-anchor :index="item[0].short[0].toUpperCase()">{{item[0].short[0].toUpperCase()}}</van-index-anchor>
        <van-cell
          v-for="ite in item"
          :key="ite.value"
          :title="ite.label"
          @click.stop="changeCity($event, ite)"
        />
      </div>
    </van-index-bar>
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
export default {
  name: 'city-page',
  components: {},
  props: {
  },
  data () {
    return {
    }
  },
  computed: {
    ...mapState('city', ['city', 'hotCity']),
    ...mapGetters('city', ['indexList', 'filterList'])
  },
  watch: {
  },
  async created () {
    await this.$store.dispatch('city/getCity')
  },
  methods: {
    changeCity (e, city) {
      if (e.target.className === 'van-cell__title') {
        this.$store.commit('city/changeCity', city)
        this.$router.push('/home')
      }
    }
  }
}
</script>

<style scoped lang='less'>
.van-index-bar {
  margin-top: 45px;
}
</style>
